<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的考试</title>
    <link rel="stylesheet" href="/css/layui.css">
    <link rel="stylesheet" href="/js/layer/mobile/need/layer.css">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/laypage.css">

    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/vue/vue.min.js"></script>
    <script type="text/javascript" src="/js/layer/layer.js"></script>
    <script src="/frame/layui/layui.js"></script>
    <script src="/js/laypage/laypage.js"></script>
    <style>
        .main{
            width: 1130px;
            height: 1000px;
            background-color: white;
            margin: 30px auto 0px auto;
        }
        .main_one{
            width:100%;
            height:100%;
            padding: 50px 0px;
        }
        .left{
            width: 200px;
            height: 100%;
            border-right: 1px solid #E2E2E2;
            float: left;
        }
        .left li{
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 18px;
        }
        .right{
            width: 875px;
            margin-left: 25px;
            float: left;
        }
        .right .me_one li{
            margin-bottom: 17px;
        }
        .myExam{
            float: left;
        }
        .sim{
            float: left;
            display: none;
        }
        .his{
            float: left;
            display: none;
        }
        /*清除浮动*/
        .clearfix:after {
            content: "";
            display:block;
            height:0;
            clear:both;
            visibility:hidden;
        }
        .sim{
            font-size: 16px;
        }
        .dyj li{
            float: left;
            width: auto;
            height: 32px;
            line-height: 32px;
            margin-left: 20px;
            padding: 1px 6px;

        }
        .dyj>div{
            padding: 10px;
        }
        .mouseLi{
            background-color: #30A4FF;
            color: white;
        }
        .clickLi{
            background-color: #30A4FF;
            color: white;
        }
        .swichA{
            border: 1px solid #D2D2D2;
            background-color: #D2D2D2;
            float: left;
            height: 30px;
            text-align: center;
            line-height: 30px;
            color: white;
            font-weight: 400;
            padding: 0 5px;
        }
        .swichB{
            border: 1px solid #D2D2D2;
            float: left;
            height: 30px;
            text-align: center;
            line-height: 30px;
            color: #D2D2D2;
            font-weight: 400;
            padding: 0 5px;
        }
    </style>
</head>
<body style="background-color: #F1F4F7">
<div class="main">
    <div class="main_one" id="aop">
        <div class="left">
            <ul>
                <li style="background-color: #30A4FF;color: white" onclick="module(1)">
                    <i class="layui-icon layui-icon-fire"></i> 我的考试
                </li>
                <li onclick="module(2)">
                    <i class="layui-icon layui-icon-survey"></i> 模拟考试
                </li>
                <li onclick="module(3)">
                    <i class="layui-icon layui-icon-templeate-1"></i> 历史成绩
                </li>
            </ul>
        </div>
        <div class="right">
            <!--我的考试-->
            <div class="myExam" style="width: 100%">
                <div class="me_one" style="width: 100%">
                    <h4>需要参加的考试</h4>
                    <hr>
                    <ul>
                        <li v-for="(paper,index) in myExams">
                            <div class="row">
                                <div class="col-sm-4" style="font-size: 17px">
                                    <span style="color: #01AAED">【{{paper.paper_name}}】 </span>
                                    满分为<span>{{paper.full}}</span>分
                                    <div class="row">
                                        <div class="col-sm-8">
                                        <span style="font-size: 13px">
                                            &nbsp;&nbsp;
                                            <i class="layui-icon layui-icon-log" style="font-size: 13px"></i>
                                            {{paper.creat_time}}
                                        </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <span style="border-radius: 10px;background-color: #1E9FFF;color: white">&nbsp;{{paper.teacher.teacher_name}}老师&nbsp;</span>
                                </div>
                                <div class="col-sm-4">
                                    <button class="btn btn-sm btn-outline btn-info" style="float: right;height: 35px" :onclick="'toExam('+index+')'">参加考试</button>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!--模拟试卷-->
            <div class="sim" style="width: 100%;">
                <div class="dyj">
                    <div class="kc clearfix"  style="border-bottom: 1px solid #E8E8E8;">

                        <div class="course">
                            <span style="float:left;margin-right: 25px;font-size: 18px">课程：</span>
                            <ul>
                                <li  style="float:left;" id="course_0" @mouseenter="enter('course','0')" @mouseleave="leave('course','0')" @click="find('course','0')">全部</li>
                                <li style="float: left" v-for="(course,index) in courses" :id="'course_'+course.course_id" @mouseenter="enter('course',course.course_id)" @mouseleave="leave('course',course.course_id)" @click="find('course',course.course_id)">
                                    {{course.course_name}}
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="lx clearfix"  style="border-bottom: 1px solid #E8E8E8">

                        <div class="ptype">
                            <span style="float: left;margin-right: 25px;font-size: 18px">类型：</span>
                            <ul>
                                <li style="float: left;" id="ptype_0" @mouseenter="enter('ptype','0')" @mouseleave="leave('ptype','0')" @click="find('ptype','0')">全部</li>
                                <li style="float: left" v-for="(ptype,index) in ptypes" :id="'ptype_'+ptype.ptype_id" @mouseenter="enter('ptype',ptype.ptype_id)" @mouseleave="leave('ptype',ptype.ptype_id)" @click="find('ptype',ptype.ptype_id)">
                                    {{ptype.ptype_name}}
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="nf clearfix" style="border-bottom: 1px solid #E8E8E8">

                        <div class="year">
                            <span style="float: left;margin-right: 25px;font-size: 18px">年份：</span>
                            <ul>
                                <li style="float:left;" id="year_0" @mouseenter="enter('year','0')" @mouseleave="leave('year','0')" @click="find('year','0')">全部</li>
                                <li style="float: left" v-for="(year,index) in years" :id="'year_'+year" @mouseenter="enter('year',year)" @mouseleave="leave('year',year)" @click="find('year',year)">
                                    {{year}}
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div class="content" style="margin-top: 20px">
                    <div class="px">
                        <div class="clearfix">
                            <span style="font-size: 14px;margin-left: 9px" id="latest" @click="toggle()">
                                <i class="layui-icon layui-icon-log" style="font-size: 14px;"></i>最新
                            </span>
                            <div style="float: right">
                                <input type="text" placeholder="请输入试卷名称进行检索" style="width: 200px;height: 37px;padding-left: 5px;border: 1px solid #E5E6E7;border-radius: 5px" id="search">
                                <button class="layui-btn" @click="search()">检索</button>
                            </div>
                        </div>

                    </div>
                    <div style="margin-top: 20px">
                        <div>
                            <ul>
                                <li v-for="(paper,index) in simPapers" style="margin-bottom: 8px">
                                    <div class="row">
                                        <div class="col-sm-4" style="font-size: 17px">
                                            <span style="color: #01AAED">【{{paper.paper_name}}】 </span>
                                            满分为<span>{{paper.full}}</span>分
                                            <div class="row">
                                                <div class="col-sm-8">
                                        <span style="font-size: 13px">
                                            &nbsp;&nbsp;
                                            <i class="layui-icon layui-icon-log" style="font-size: 13px"></i>
                                            {{paper.creat_time}}
                                        </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-4">
                                            <span style="border-radius: 10px;background-color: #1E9FFF;color: white">&nbsp;{{paper.teacher.teacher_name}}老师&nbsp;</span>
                                        </div>
                                        <div class="col-sm-4">
                                            <button class="btn btn-sm btn-outline btn-info" style="float: right;height: 35px" :onclick="'toExam('+index+')'">参加考试</button>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div id="pagenav">

                        </div>
                    </div>
                </div>
            </div>
            <!--历史成绩-->
            <div class="his" style="width: 100%;">
                <h4>这里是历史成绩</h4>
                <hr>
                <div class="clearfix">
                    <div class="swichA">模拟</div>
                    <div class="swichB">考试</div>
                    <div style="float: right;margin-left: 5px">
                        <button class="btn" onclick="gett()">检索</button>
                    </div>
                    <div style="float: right;margin-left: 10px">
                        <input class="form-control" type="text">
                    </div>
                    <div style="float: right;margin-left: 10px;">
                        <select class="form-control" name="quiz2">
                            <option value="0" style="background-color:#1E90FF;color:white">--请选择课程--</option>
                            <option v-for="score in scores" track-ty="index" :value="score.paper.teacher.course.course_id">
                                {{score.paper.teacher.course.course_name}}
                            </option>
                        </select>
                    </div>
                    <div style="float: right;">
                        <div class="layui-inline">
                            日期范围：
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="test6" placeholder=" - " style="height: 34px;">
                            </div>
                        </div>

                    </div>

                </div>
                <div>
                    <div>
                        <table class="table">
                            <thead>
                            <tr>
                                <td>试卷名</td>
                                <td>课程</td>
                                <td>满分</td>
                                <td>及格线</td>
                                <td>考试时间</td>
                                <td>成绩</td>
                            </tr>
                            </thead>
                            <tr v-for="(score,index) in scores">
                                <td>{{score.paper.paper_name}}</td>
                                <td>{{score.paper.teacher.course.course_name}}</td>
                                <td>{{score.full}}</td>
                                <td>{{score.paper.pass}}</td>
                                <td>{{score.k_date | formatDate}}</td>
                                <td>{{score.score}}</td>

                            </tr>
                        </table>
                    </div>
                </div>
                <div id="scorePage">

                </div>
            </div>
        </div>

    </div>
</div>

</body>
<script>
    function gett() {
        alert($("#test6").val());
    }

    layui.use(['form','laydate'], function(){
        //var form = layui.form;
        var laydate = layui.laydate;
        //日期时间范围
        laydate.render({
            elem: '#test6'
            ,range: true
        });
    });


    $(function () {
        $(".left>ul>li").click(function () {
            $(this).css({"background-color":"#30A4FF","color":"white"});
            $(".left>ul>li").not(this).css({"background-color":"white","color":"black"});
        });
        /*类型的全部 条件 样式*/
        $("#course_0").addClass("clickLi");
        $("#ptype_0").addClass("clickLi");
        $("#year_0").addClass("clickLi");


    });

    /*需要参加的考试*/
    function getZxPaper() {
        $.ajax({
            type:'get',
            url:'/stu/getZxPaper.do',
            dataType:'json',
            success:function (data) {
                console.log(data);
                myExam.myExams = data;
            }
        });
    }

    /*时间排序*/


    var myExam = new Vue({
        el:"#aop",
        data:{
            myExams:[],
            courses:[],
            ptypes:[],
            years:[],
            simPapers:[],
            course_id:0,
            ptype_id:0,
            year:0,
            latest:0,
            names:"",
            flag:true,
            scores:[]
        },methods:{
            enter:function (type,name) {
                //$("#"+type+"_"+name).css({"background-color":"#30A4FF","color":"white"});
                $("#"+type+"_"+name).addClass("mouseLi");
            },
            leave:function (type,name) {
                //$("#"+type+"_"+name).css({"background-color":"white","color":"black"});
                $("#"+type+"_"+name).removeClass("mouseLi");
            },
            find:function (type,name) {
                $("."+type+" li").removeClass("clickLi");
                $("#"+type+"_"+name).addClass("clickLi");
                switch(type){
                    case 'course':
                        this.course_id = name;
                        break;
                    case 'ptype':
                        this.ptype_id = name;
                        break;
                    case 'year':
                        this.year = name;
                        break;
                    case 'latest':
                        this.latest = name;
                        break;
                    case 'names':
                        this.names = name;
                        break;
                }
                getSimPaper();
                console.log(this.course_id+"===="+this.ptype_id+"===="+this.year+"===="+this.latest+"===="+this.names);
            },/*最新排序 两次点击*/
            toggle:function () {
                this.flag = !this.flag;
                if (this.flag){
                    $("#latest").css("color","black");
                    this.find("latest",0);
                }else {
                    $("#latest").css("color","blue");
                    this.find("latest",1);
                }
            },/*搜索试卷*/
            search:function () {
                getSimPaper();
            }
        },
        filters:{
            /*转换时间格式*/
            formatDate:function (value) {
                var date = new Date(value);
                var y = date.getFullYear();
                var MM = date.getMonth() + 1;
                MM = MM < 10 ? ('0' + MM) : MM;
                var d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                return y + '-' + MM + '-' + d;
            }
        }
    });
    getZxPaper();
    getMnCondition();
    getSimPaper();
    function module(a){
        if (a == 1){
            $(".myExam").css("display","block");
            $(".sim").css("display","none");
            $(".his").css("display","none");
        }
        if (a == 2){
            $(".myExam").css("display","none");
            $(".sim").css("display","block");
            $(".his").css("display","none");
        }
        if (a == 3){
            $(".myExam").css("display","none");
            $(".sim").css("display","none");
            $(".his").css("display","block");
        }
    }
    function toExam(i) {
        var kl = '';
        layer.prompt({
            title:"请输入考试口令"
        },function (pass,index) {
            kl = pass;
            layer.close(index);
            if (myExam.myExams[i].p_key != kl){
                console.log(myExam.myExams[i].p_key);
                layer.msg("口令错误");
            }else {
                window.open("/stu/toExam/"+myExam.myExams[i].paper_id+".do");
            }
        });
    }
    
    //获取符合条件的所有课程 所有试卷类型 所有年份
    function getMnCondition() {
        $.ajax({
            type:'post',
            url:"/stu/getCondition.do",
            dataType:"json",
            success:function (data) {
                myExam.courses = data.courses;
                myExam.ptypes = data.ptypes;
                myExam.years = data.years;
                console.log(data.years);
            }
        });

    }
    /*获取模拟试卷的试卷*/
    function getSimPaper(curr) {
        $.ajax({
            type:'post',
            url:"/stu/paperPage.do",
            data:{
                curPageNum:curr || 1,
                pageSize:2,
                course_id:myExam.course_id,
                ptype_id:myExam.ptype_id,
                year:myExam.year,
                latest:myExam.latest,
                names:$("#search").val()
            },
            dataType:"json",
            success:function (data) {
                myExam.simPapers = data.page;

                laypage({
                    cont: 'pagenav',
                    pages: data.totalPages,
                    first: '首页',
                    last: '尾页',
                    curr: curr || 1,
                    jump: function (obj, first) {
                        if (!first) {
                            getSimPaper(obj.curr);
                        }
                    }
                });
            }
        });
    }
    /*获取当前学生的成绩*/
    getCurStuScores();
    function getCurStuScores(curr) {
        $.ajax({
            type:'post',
            url:"/stu/getCurStuScorePage.do",
            data:{
                curPageNum:curr || 1,
                pageSize:10
            },
            dataType:"json",
            success:function (data) {
                myExam.scores = data.page;
                console.log(data.page);
                laypage({
                    cont: 'scorePage',
                    pages: data.totalPages,
                    first: '首页',
                    last: '尾页',
                    curr: curr || 1,
                    jump: function (obj, first) {
                        if (!first) {
                            getCurStuScores(obj.curr);
                        }
                    }
                });
            }
        });
    }
</script>
</html>